<template>
    <div class="view">
        <div ref="header" class="nav-back" :style="`background:rgba(255,255,255,${headAlpha});color:${headAlpha>.9?'#ec6786':'#fff'}`">
            <span class="iconfont icon-fanhui" @click="back"></span>
            <span class="nickname" :style="`color:${headAlpha>.9?'#ec6786':'#fff'}`">红娘详情</span>
        </div>
        <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll']" @scroll="scrollHandler" :options="{bounce:false}">
            <div class="nav-box">
                <svg class="deco-svg" width="100vw" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path :d="`M0 100 c${screenWidth/3} -${60 * screenWidth/320}, ${screenWidth/3*2} -${60 * screenWidth/320}, ${screenWidth} 0 V 130 H 0 Z`" stroke="#fff" fill="#fff"></path>
                </svg>
                <div class="arc-box" :style="`height: 80px;bottom: 0px;`">
                    <div class="head-img-box">
                        <img v-if="matchmaker.avatar_id&&matchmaker.avatar&&matchmaker.avatar.file_status.status" class="self-img" :src="matchmaker.avatar.file_path+'?imageView2/0/w/80'">
                        <svg v-else class="svg-icon hongniang" aria-hidden="true">
                            <use xlink:href="#icon-hongniang"></use>
                        </svg>
                    </div>
                    <div class="data-complete flex" style="bottom:20px;">
                        <div class="out-round">
                            <round-progress-bar class="icon-box" circleBarWidth="10vw"
                                                circleBarHeight="10vw"
                                                circleLClip="rect(0,5vw,auto,0)"
                                                circleRClip="rect(0,auto,auto,5vw)"
                                                circleBarBC="#ec6786"
                                                circleBarLRBC="#F8C9D4"
                                                maskWidth="8vw"
                                                maskHeight="8vw"
                                                maskLineHeight="8vw"
                                                :progress="parseInt(matchmaker.infoDegree*100)"
                                                progressColor="#ec6786">
                            </round-progress-bar>
                        </div>
                        <div class="tip">
                            资料完整度
                        </div>
                    </div>
                </div>
            </div>
            <div class="base-data">
                <div class="nickname">{{matchmaker.nickName}}</div>
                <div class="base-items">
                    <span class="age">{{matchmaker.age=='未知'||matchmaker.age==0?'年龄未知':(matchmaker.age||'年龄')+'岁'}}</span>
                </div>
            </div>
            <div class="other-data">
                <div class="self-base-data">
                    <div class="title-box flex">
                        <span class="iconfont icon-shenfenzheng"></span>
                        <span class="title">基本资料</span>
                    </div>
                    <div class="content-box">
                        <div class="id flex"><span>ID</span><span class="ellipsis">{{matchmaker.user_no}}</span></div>
                        <div class="nickname flex"><span>昵称</span><span class="ellipsis">{{matchmaker.nickName}}</span></div>
                        <div class="sex flex"><span>性别</span><span class="ellipsis">{{matchmaker.gender==0?'未填写':matchmaker.gender==1?'男':'女'}}</span></div>
                        <div class="age flex"><span>年龄</span><span class="ellipsis">{{matchmaker.age=='未知'?'未填写':(matchmaker.age||'年龄')+'岁'}}</span></div>
                        <div class="home flex"><span>居住地</span><span class="ellipsis">{{matchmaker.snap_city_id}}</span></div>
                        <div class="industry flex"><span>行业</span><span class="ellipsis">{{matchmaker.snap_industry==''?'未填写':matchmaker.snap_industry}}</span></div>
                        <div class="company-position flex"><span>公司职位</span><span class="ellipsis">{{matchmaker.company_position==''?'未填写':matchmaker.company_position}}</span></div>
                        <div class="identity-introduction">
                            <div>自我介绍</div>
                            <div class="" style="color: #aaa;padding-top: 10px;">{{matchmaker.identity_introduction==''?'暂无自我介绍':matchmaker.identity_introduction}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import HeadImg from "@/components/HeadImg.vue";
    import RoundProgressBar from "@/components/RoundProgressBar.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            HeadImg,
            RoundProgressBar
        }
    })
    export default class MatchmakerMineData extends Scene {
        @State("UserStore")
        public user!: InterfaceUser;
        private pullDownY: number = 0;
        private matchmaker: any = {};

        private get screenWidth(): number {
            const screenWidth = window.screen.width;
            return screenWidth;
        }

        private get headAlpha(): number {
            const pullDownY: number = (this.pullDownY > 0 ? 0 : this.pullDownY);
            const alpha = Math.abs(pullDownY) / 200;
            return (alpha > 1 ? 1 : alpha);
        }

        private getMatchmakerDetail(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getMatchmakerInfo, {user_id: this.$route.query.matchmakerId}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    console.log(res);
                    this.matchmaker = res.data;
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private scrollHandler(pos: any): void {//scroll滚动事件
            this.pullDownY = pos.y;
        }


        private mounted(): void {
            this.getMatchmakerDetail();
        }

    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;

        .nav-back
            width 100vw;
            position fixed;
            top 0;
            left 0;
            z-index: 100;
            color #fff;
            padding 15px 10px;
            padding-top calc(15px + var(--safe-area-inset-top));
            background rgba(255, 255, 255, 0);

            .icon-share
                font-size 22px;

            .nickname
                font-size 16px;
                color $theme-common-color;

        .scroll
            position relative;
            height 100vh;
            background-color #fff;

        .nav-box
            position relative;
            width 100vw;
            height 200px;
            background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

            svg.deco-svg
                position absolute;
                bottom 0px;
                left 0px;

            .arc-box
                position absolute;
                left 0px;
                width 100vw;
                z-index 50;

                .head-img-box
                    position absolute;
                    bottom 40px;
                    left calc(50vw - 11vw);
                    border-radius 50%;
                    overflow hidden;
                    text-align center;
                    background-color #fff;

                    .self-img
                        width 22vw;
                        height 22vw;
                        border-radius 50%;

                    svg.hongniang
                        width 22vw;
                        height 22vw;
                        border-radius 50%;

                .data-complete
                    position absolute;
                    left 10px;
                    flex-wrap wrap;
                    align-content center;
                    justify-content center;
                    text-align center;

                    .out-round
                        width 11vw;
                        height 11vw;
                        padding-top 0.5vw;
                        padding-left 0.5vw;
                        border-radius 50%;
                        background-color #fff;
                        box-shadow 0px 1px 1px #ccc;

                    .tip
                        width 100%;
                        color $theme-common-color;
                        padding-top 10px;

        .base-data
            background-color #fff;
            text-align center;

            .nickname
                font-size 16px;
                font-weight 600;
                padding-bottom 12px;

        .other-data
            //height calc(100vh - 200px - 41px);
            padding-bottom var(--safe-area-inset-bottom)

            > div
                .title-box
                    height 50px;
                    padding 0px 10px;
                    justify-content: space-between;
                    align-items center;

                    .iconfont
                        display inline-block;
                        width 40px;

                    .title
                        display inline-block;
                        text-align left;
                        width calc(100vw - 20px - 40px);
                        font-size 16px;

                .content-box
                    margin 0px 19px;
                    padding 15px 0px 15px 15px;
                    border-left 1px solid $theme-line-color;
                    line-height 1.3em;

                    .has-content
                        > span
                            display inline-block;
                            border 1px solid $theme-line-color;
                            border-radius 30px;
                            padding 2px 10px;
                            margin 5px;

            div.self-base-data
                .content-box
                    padding-top 2px;
                    padding-bottom 2px;

                    > div
                        padding 8px 0px;

                        > span
                            display inline-block;
                            width 50vw;

</style>
